<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<title>Canvas</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/responsive.css" />
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="canvas-box">
			<div class="hd ">
				<div class="left">
					<h3>Godiva parameter</h3>
					<a id="redact-btn" href="javascript:void(0);"></a>
				</div>
				<div class="btns g-button-wrap">
					<button class="cancel-button" type="button">Cancel</button>
					<button class="save-button border disabled" type="button">Save</button>
				</div>
			</div>
			<div class="bd">
			</div>
			<div class="ft">
				<div class="left">
					<div class="tab swiper-container">
						<ul class="swiper-wrapper">
							<li class="swiper-slide active">
								<a href="javascript:void(0);">Backdrop</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Product</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Camera</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Lighting</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Accessories</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Props</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Annotations</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Lighting</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Accessories</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Props</a>
							</li>
							<li class="swiper-slide">
								<a href="javascript:void(0);">Annotations</a>
							</li>
						</ul>
					</div>
					<div class="content-box">
						<div class="content-item swiper-container">
							<ul class="swiper-wrapper">
								<li class="swiper-slide"> 
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_13.png" alt="">
										</div>
										<p>Canvas</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_14.png" alt="">
										</div>
										<p>Small</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_15.png" alt="">
										</div>
										<p>Large</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_16.png" alt="">
										</div>
										<p>Seamless</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_17.png" alt="">
										</div>
										<p>Brick</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_18.png" alt="">
										</div>
										<p>White</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_13.png" alt="">
										</div>
										<p>Canvas</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_14.png" alt="">
										</div>
										<p>Small</p>
									</a>
								</li>
								<li class="swiper-slide">
									<a href="javascript:void(0);">
										<div class="img">
											<img src="images/img_15.png" alt="">
										</div>
										<p>Large</p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="tab swiper-container">
						<ul class="swiper-wrapper">
							<li class="swiper-slide"> 
								<a href="javascript:void(0);">Layers</a>
							</li>
						</ul>
					</div>
					<div class="content-box">
						<div class="content-item swiper-container">
							<ul class="swiper-slide">
								<li class="swiper-wrapper">
									<a href="javascript:void(0);">
										<img src="" alt="">
										<p></p>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div> 
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// tab切换
				$(".canvas-box .ft .tab li").on("click",function(){
					$(this).addClass("active").siblings().removeClass("active");
				});
				var mySwiper = new Swiper ('.canvas-box .ft .tab', {
				    slidesPerView :'auto',
					spaceBetween : 40,
				});
				var mySwiper2 = new Swiper ('.canvas-box .ft .content-item', {
					slidesPerView :'auto',
					spaceBetween : 35,
				});  
			}) 
		</script>
	</body>

</html>
